<script lang="ts">
	import Icon from '$lib/components/Basic/Icon/Icon.svelte';
	export type Variant = 'info' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
	export type Size = 'sm' | 'md' | 'lg';
	export type Theme = 'dark' | 'light' | 'plain';
	/**
	 * Tag 组件 Props 定义（保持精简）
	 */
	const {
		children,
		variant = 'info',
		size = 'md',
		theme = 'light',
		round = false,
		closable = false,
		disableTransitions = false,
		editable = false,
		disabled = false,
		onClose = () => {},
		onEdit = () => {},
		...restProps
	} = $props<{
		children?: any;
		variant?: 'info' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
		size?: 'sm' | 'md' | 'lg';
		theme?: 'dark' | 'light' | 'plain';
		round?: boolean;
		closable?: boolean;
		disableTransitions?: boolean;
		editable?: boolean;
		disabled?: boolean;
		onClose?: (e: MouseEvent) => void;
		onEdit?: (e: MouseEvent) => void;
	} & any>();

	let isRemoving = $state(false);

	const handleAction = (e: MouseEvent, callback: (e: MouseEvent) => void) => {
		e.stopPropagation();
		if (!disabled) callback(e);
	};

	const handleClose = (e: MouseEvent) => {
		if (disabled || isRemoving) return;
		isRemoving = true;
		handleAction(e, onClose);
		if (!disableTransitions) {
			setTimeout(() => {
				isRemoving = false;
			}, 300);
		} else {
			isRemoving = false;
		}
	};

	const handleEdit = (e: MouseEvent) => handleAction(e, onEdit);

	function fade(node: HTMLElement, { enabled = true }: { enabled?: boolean }) {
		if (!enabled || disableTransitions) return { duration: 0 };
		return {
			duration: 300,
			css: (t: number) => `
				opacity: ${t};
				transform: scale(${t * 0.95 + 0.05});
				transition: opacity 300ms ease, transform 300ms ease;
			`
		};
	}
</script>

{#if !isRemoving || disableTransitions}
	<span
		class="tag"
		class:tag--round={round}
		class:tag--dark={theme === 'dark'}
		class:tag--light={theme === 'light'}
		class:tag--plain={theme === 'plain'}
		class:tag--primary={variant === 'primary'}
		class:tag--info={variant === 'info'}
		class:tag--secondary={variant === 'secondary'}
		class:tag--success={variant === 'success'}
		class:tag--warning={variant === 'warning'}
		class:tag--error={variant === 'error'}
		class:tag--sm={size === 'sm'}
		class:tag--md={size === 'md'}
		class:tag--lg={size === 'lg'}
		class:tag--disabled={disabled}
		class:tag--closable={closable && !disabled}
		class:tag--editable={editable && !disabled}
		{...restProps}
		transition:fade={{ enabled: !isRemoving }}
	>
		<span class="tag__content">{@render children?.()}</span>
		{#if (editable || closable) && !disabled}
			<span class="tag__actions" style:gap={editable && closable ? '2px' : '0'}>
				{#if editable && !disabled}
					<button
						class="tag__action-btn tag__edit"
						onclick={handleEdit}
						aria-label="编辑标签"
					>
						<Icon src="interface/edit" class="tag__action-icon" />
					</button>
				{/if}
				{#if closable && !disabled}
					<button
						class="tag__action-btn tag__close"
						onclick={handleClose}
						aria-label="移除标签"
					>
						<Icon src="symbol/close" class="tag__action-icon" />
					</button>
				{/if}
			</span>
		{/if}
	</span>
{/if}

<style scoped lang="scss">
	.tag {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		border-radius: var(--border-radius);
		font-family: inherit;
		font-weight: 400;
		white-space: nowrap;
		transition: all 0.2s ease;
		box-sizing: border-box;
		vertical-align: middle;

		&.tag--round {
			border-radius: 999px;
		}

		&.tag--disabled {
			cursor: not-allowed;
			opacity: 0.4;
			pointer-events: none;
		}

		.tag__content {
			line-height: 1;
			vertical-align: middle;
			display: inline-flex;
			align-items: center;
		}

		.tag__actions {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			margin-left: 4px;
			line-height: 1;
			vertical-align: middle;
		}
	}

	/* 尺寸样式：删除嵌套的 .tag__action-icon 选择器 */
	.tag--sm {
		height: 20px;
		line-height: 20px;
		padding: 0 8px;
		font-size: 12px;

		.tag__action-btn {
			width: 14px;
			height: 14px;
			line-height: 14px;
		}
	}

	.tag--md {
		height: 24px;
		line-height: 24px;
		padding: 0 10px;
		font-size: 13px;

		.tag__action-btn {
			width: 16px;
			height: 16px;
			line-height: 16px;
		}
	}

	.tag--lg {
		height: 28px;
		line-height: 28px;
		padding: 0 12px;
		font-size: 14px;

		.tag__action-btn {
			width: 18px;
			height: 18px;
			line-height: 18px;
		}
	}

	/* 主题样式保持不变 */
	.tag--light {
		&.tag--info {
			background-color: color-mix(in srgb, var(--color-info-500) 10%, transparent);
			color: var(--color-info-700);
			border: 1px solid var(--color-info-300);
		}
		&.tag--primary {
			background-color: color-mix(in srgb, var(--color-primary-500) 10%, transparent);
			color: var(--color-primary-700);
			border: 1px solid var(--color-primary-300);
		}
		&.tag--secondary {
			background-color: color-mix(in srgb, var(--color-secondary-500) 10%, transparent);
			color: var(--color-secondary-700);
			border: 1px solid var(--color-secondary-300);
		}
		&.tag--success {
			background-color: color-mix(in srgb, var(--color-success-500) 10%, transparent);
			color: var(--color-success-700);
			border: 1px solid var(--color-success-300);
		}
		&.tag--warning {
			background-color: color-mix(in srgb, var(--color-warning-500) 10%, transparent);
			color: var(--color-warning-700);
			border: 1px solid var(--color-warning-300);
		}
		&.tag--error {
			background-color: color-mix(in srgb, var(--color-error-500) 10%, transparent);
			color: var(--color-error-700);
			border: 1px solid var(--color-error-300);
		}
	}

	.tag--dark {
		&.tag--info {
			background-color: var(--color-info-600);
			color: #fff;
			border: 1px solid var(--color-info-500);
		}
		&.tag--primary {
			background-color: var(--color-primary-600);
			color: #fff;
			border: 1px solid var(--color-primary-500);
		}
		&.tag--secondary {
			background-color: var(--color-secondary-600);
			color: #fff;
			border: 1px solid var(--color-secondary-500);
		}
		&.tag--success {
			background-color: var(--color-success-600);
			color: #fff;
			border: 1px solid var(--color-success-500);
		}
		&.tag--warning {
			background-color: var(--color-warning-600);
			color: #fff;
			border: 1px solid var(--color-warning-500);
		}
		&.tag--error {
			background-color: var(--color-error-600);
			color: #fff;
			border: 1px solid var(--color-error-500);
		}
	}

	.tag--plain {
		&.tag--info {
			background-color: transparent;
			color: var(--color-info-500);
			border: 1px solid var(--color-info-200);
		}
		&.tag--primary {
			background-color: transparent;
			color: var(--color-primary-500);
			border: 1px solid var(--color-primary-200);
		}
		&.tag--secondary {
			background-color: transparent;
			color: var(--color-secondary-500);
			border: 1px solid var(--color-secondary-200);
		}
		&.tag--success {
			background-color: transparent;
			color: var(--color-success-500);
			border: 1px solid var(--color-success-200);
		}
		&.tag--warning {
			background-color: transparent;
			color: var(--color-warning-500);
			border: 1px solid var(--color-warning-200);
		}
		&.tag--error {
			background-color: transparent;
			color: var(--color-error-500);
			border: 1px solid var(--color-error-200);
		}
	}

	.tag__action-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		margin: 0;
		border: none;
		border-radius: 50%;
		background: transparent;
		cursor: pointer;
		color: inherit;
		outline: none;
		flex-shrink: 0;
		transition: background-color 0.2s ease;
		vertical-align: middle;

		&.tag__close:hover {
			background-color: color-mix(in srgb, currentColor 15%, transparent);
		}

		&.tag__edit:hover {
			background-color: color-mix(in srgb, currentColor 15%, transparent);
		}
	}

	/* 统一设置 .tag__action-icon 样式（无需按尺寸嵌套） */
	.tag__action-icon {
		font-size: 11px; /* 默认尺寸，适配 md 按钮 */
		line-height: inherit; /* 继承按钮的 line-height，确保居中 */
		display: block;
	}

	/* Dark主题hover效果保持不变 */
	.tag--dark {
		.tag__action-btn {
			&.tag__close:hover,
			&.tag__edit:hover {
				background-color: color-mix(in srgb, currentColor 30%, transparent);
			}
		}
	}

	@keyframes tagFadeOut {
		0% {
			opacity: 1;
			transform: scale(1);
		}
		100% {
			opacity: 0;
			transform: scale(0.95);
		}
	}

	.tag[data-transition="fade"][data-state="out"] {
		animation: tagFadeOut 300ms ease forwards;
	}
</style>